<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人人修 后台登录页面</title>
    <script src="${request.contextPath}/js/jquery.js"></script>
    <style>
        * {
            padding:0;
            margin:0;
        }
        #login_wrapper {
            position:fixed;
            width:100%;
            height:100%;
        }
        #login_form {
            padding:20px;
            background:#fff;
            width:200px;
            margin:250px auto;
            border-radius:5px;
        }
        #login_form > h2 {
            font-size:15px;
        }
        .input_wrapper {
            width:190px;
            margin: 10px 0;
            padding: 5px;
            font-size:14px;
            outline:none;
            border:none;
            border-bottom:1px #333 solid;
        }
        #login_button {
            width:100px;
            height:26px;
            float:right;
            outline:none;
            margin-top:10px;
        }
        #wrong_tip {
            font-size:12px;
            color:#f00;
            display:none;
        }
        .loading {
            display:none;
            width:100%;
            height:100%;
            position:fixed;
            z-index:999;
            background-color:rgba(0,0,0,.5);
            background-image:url(${request.contextPath}/images/icons/loading.gif);
            background-size:50px;
            background-position:center;
            background-repeat:no-repeat;
        }
    </style>
</head>
<body>
    <video style="position:absolute;z-index:0;width:100%;height:100%;top:0;left:0" src="https://cms-origin.battlenet.com.cn/cms/gallery/119X9TLJ06WE1534201549624.mp4" autoplay></video>
    <div class="loading">
    </div>
    <div id="login_wrapper">
        <form id="login_form" method="post" target="rfFrame">
            <h2>人人修 后台登录</h2>
            <input type="text" name="username" id="username_input" onkeyup="value=value.replace(/\W/,'')" autocomplete="off" placeholder="管理员用户名..." maxlength="18" class="input_wrapper" />
            <input type="password" name="password" id="password_input" autocomplete="off" placeholder="管理员密码..." maxlength="18" class="input_wrapper" />
            <p id="wrong_tip">账号或密码错误!</p>
            <input type="submit" value="登录" id="login_button" />
            <div style="clear:both"></div>
            <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
        </form>
    </div>
</body>
<script>
    $(".input_wrapper").focus(function() {
        $(this).css("border-color", "#333");
        $("#wrong_tip").css("display", "none");
    })
    $("#login_form").submit(function() {
        var username = $("#username_input").val();
        var password = $("#password_input").val();
        if(username.trim() == "") {
            $("#username_input").css("border-color", "red");
            $("#wrong_tip").css("display", "block");
            $("#wrong_tip").html("用户名不能为空!");
            return false;
        }
        if(password.trim() == "") {
            $("#password_input").css("border-color", "red");
            $("#wrong_tip").css("display", "block");
            $("#wrong_tip").html("密码不能为空!");
            return false;
        }
        $(".loading").css("display", "block");
        $.ajax({
            url: "${request.contextPath}/adminLogin",
            type: "post",
            async: true,
            data: $("#login_form").serialize(),
            dataType: "text",
            success: function(data) {
                if(data == "success") {
                    window.location.href = "${request.contextPath}/index"
                } else {
                    $("#wrong_tip").css("display", "block");
                    $("#wrong_tip").html("账号或密码错误!");
                    $(".loading").css("display", "none");
                    return false;
                }
            },
            error: function(data,error) {
                $(".loading").css("display", "none");
            }
        })
    });
</script>
</html>